<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import MMenu from './components/Menu.vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";

const w = 'test'
</script>
<script>

export default {
  data() {
    return {
      menuItems: [
        {
          name: '首页',
          url: '/',
          icon: '<svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-365b8594=""><path fill="currentColor" d="M192 413.952V896h640V413.952L512 147.328 192 413.952zM139.52 374.4l352-293.312a32 32 0 0140.96 0l352 293.312A32 32 0 01896 398.976V928a32 32 0 01-32 32H160a32 32 0 01-32-32V398.976a32 32 0 0111.52-24.576z"></path></svg>',// <el-icon>< /></el-icon>
          id: 1,
        },
        {
          name: '我的博客',
          url: '/blog',
          icon: '<svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-365b8594=""><path fill="currentColor" d="M192 736h640V128H256a64 64 0 00-64 64v544zm64-672h608a32 32 0 0132 32v672a32 32 0 01-32 32H160l-32 57.536V192A128 128 0 01256 64z"></path><path fill="currentColor" d="M240 800a48 48 0 100 96h592v-96H240zm0-64h656v160a64 64 0 01-64 64H240a112 112 0 010-224zm144-608v250.88l96-76.8 96 76.8V128H384zm-64-64h320v381.44a32 32 0 01-51.968 24.96L480 384l-108.032 86.4A32 32 0 01320 445.44V64z"></path></svg>',
          id: 2,
        },
        {
          name: '我的资料',
          url: '/mine',
          icon: '<svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-365b8594=""><path fill="currentColor" d="M128 384v448h768V384H128zm-32-64h832a32 32 0 0132 32v512a32 32 0 01-32 32H96a32 32 0 01-32-32V352a32 32 0 0132-32zM160 192h704v64H160zm96-128h512v64H256z"></path></svg>',
          id: 3,
        },
        {
          name: '我的状态',
          url: '/checkin',
          icon: '<svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-365b8594=""><path fill="currentColor" d="M801.728 349.184l4.48 4.48a128 128 0 010 180.992L534.656 806.144a128 128 0 01-181.056 0l-4.48-4.48-19.392 109.696a64 64 0 01-108.288 34.176L78.464 802.56a64 64 0 0134.176-108.288l109.76-19.328-4.544-4.544a128 128 0 010-181.056l271.488-271.488a128 128 0 01181.056 0l4.48 4.48 19.392-109.504a64 64 0 01108.352-34.048l142.592 143.04a64 64 0 01-34.24 108.16l-109.248 19.2zm-548.8 198.72h447.168v2.24l60.8-60.8a63.808 63.808 0 0018.752-44.416h-426.88l-89.664 89.728a64.064 64.064 0 00-10.24 13.248zm0 64c2.752 4.736 6.144 9.152 10.176 13.248l135.744 135.744a64 64 0 0090.496 0L638.4 611.904H252.928zm490.048-230.976L625.152 263.104a64 64 0 00-90.496 0L416.768 380.928h326.208zM123.712 757.312l142.976 142.976 24.32-137.6a25.6 25.6 0 00-29.696-29.632l-137.6 24.256zm633.6-633.344l-24.32 137.472a25.6 25.6 0 0029.632 29.632l137.28-24.064-142.656-143.04z"></path></svg>',
          id: 4,
        },
        {
          name: '留言板',
          url: '/record',
          icon: '<svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-365b8594=""><path fill="currentColor" d="M273.536 736H800a64 64 0 0064-64V256a64 64 0 00-64-64H224a64 64 0 00-64 64v570.88L273.536 736zM296 800L147.968 918.4A32 32 0 0196 893.44V256a128 128 0 01128-128h576a128 128 0 01128 128v416a128 128 0 01-128 128H296z"></path><path fill="currentColor" d="M512 499.2a51.2 51.2 0 110-102.4 51.2 51.2 0 010 102.4zm192 0a51.2 51.2 0 110-102.4 51.2 51.2 0 010 102.4zm-384 0a51.2 51.2 0 110-102.4 51.2 51.2 0 010 102.4z"></path></svg>',
          id: 5,
        },
      ],
    }
  },
  methods: {},
}
</script>

<template>
  <el-config-provider :locale="zhCn">
    <el-container style="">
      <el-header>
        <m-menu :menu-items="menuItems"/>
      </el-header>
      <el-main style="width: 80%; margin: 0 auto">
        <router-view>
        </router-view>
      </el-main>
      <el-footer>
        <el-row justify="space-around">
          <el-col :span="6">
            <div>
              <span>邮件：</span>
              <el-link type="primary" href="mailto:liumingxun@yeah.net">liumingxun@yeah.net</el-link>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <span>QQ：</span>
              <el-link type="primary" href="tencent://message/?uin=1599910715">1599910715</el-link>
            </div>
          </el-col>
        </el-row>
        <div>2021-2021&copy;&nbsp;洛明个人</div>
      </el-footer>
    </el-container>
  </el-config-provider>
</template>

<style>
.el-container {
  width: 80%;
  margin: 0 auto;
}

* {
  margin: 0;
  padding: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.push,
.footer {
  height: 100px;
}
</style>
